@extends('seller::layout.master')

@section('body-class', 'page-login')

@section('content')
  <div class="container">
    <div class="d-flex align-items-center pt-2 pt-sm-5 pb-4 pb-sm-5">
      <div class="card" style="width: 560px">
        <div class="w-480">
          <div class="card-header mt-3 mb-4">
            <h4 class="fw-bold">{{ __('seller::login.index_register') }}</h4>
          </div>
          <div class="card-body">
            <form action="{{ seller_route('register.store') }}" method="post" class="needs-validation row" novalidate>
              @csrf
              @if (session('error'))
                <div class="alert alert-danger mt-n4">
                  {{ session('error') }}
                </div>
              @endif

              {{-- <div class="form-floating mb-4">
                <input type="text" name="email" class="form-control" id="email-input" value="{{ old('email', $admin_email ?? '') }}" placeholder="{{ __('common.email') }}">
                <label for="email-input">{{ __('common.email') }}</label>
                @error('email')
                  <div class="form-text text-danger">{{ $message }}</div>
                @enderror
              </div> --}}

              <div class="col-md-6 col-12 mb-4">
                <label class="form-label">{{ __('common.email') }}</label>
                <input type="text" name="email" class="form-control" value="{{ old('email', $admin_email ?? '') }}" placeholder="{{ __('common.email') }}" required>
                @if ($errors->has('email'))
                <div class="invalid-feedback">{{ $errors->first('email') }}</div>
                @else
                <div class="invalid-feedback">{{ __('common.error_required', ['name' => __('seller::login.email')]) }}</div>
                @endif
              </div>

              <div class="col-md-6 col-12 mb-4">
                <label class="form-label">{{ __('shop/login.password') }}</label>
                <input type="password" name="password" class="form-control" value="{{ old('password', $admin_password ?? '') }}" placeholder="{{ __('shop/login.password') }}" required>
                @if ($errors->has('password'))
                <div class="invalid-feedback">{{ $errors->first('password') }}</div>
                @else
                <div class="invalid-feedback">{{ __('common.error_required', ['name' => __('seller::login.password')]) }}</div>
                @endif
              </div>

              <div class="col-md-6 col-12 mb-4">
                <label class="form-label">{{ __('seller::login.store_name') }}</label>
                <input type="text" name="store_name" class="form-control" value="{{ old('store_name', $store_name ?? '') }}" placeholder="{{ __('seller::login.store_name') }}" required>
                @if ($errors->has('store_name'))
                <div class="invalid-feedback">{{ $errors->first('store_name') }}</div>
                @else
                <div class="invalid-feedback">{{ __('common.error_required', ['name' => __('seller::login.store_name')]) }}</div>
                @endif
              </div>

              <div class="col-md-6 col-12 mb-4">
                <label class="form-label">{{ __('seller::register.seller_type') }}</label>
                <select class="form-select" name="type" required>
                  <option value="company">{{ __('seller::register.type_company') }}</option>
                  <option value="personal">{{ __('seller::register.type_personal') }}</option>
                </select>
              </div>

              <div class="type-info mb-3">
                <div class="">
                  <div class="id-card-title-company">{{ __('seller::register.business_license') }}</div>
                  <div class="id-card-title-personal d-none">{{ __('seller::register.id_card_photo') }}</div>

                  <div
                    class="bg-light border mt-1 wh-80 d-flex justify-content-center open-file cursor-pointer align-items-center position-relative"
                    ratio="32/32">
                    <i class="bi bi-plus-lg fs-3"></i>
                    <img src="{{ image_resize(old('id_card', $id_card ?? '')) }}" class="img-fluid d-none id-card-img max-h-100">
                  </div>

                  <div class="mb-3">
                    <input type="text" value="{{ old('id_card', $id_card ?? '') }}" name="id_card" class="opacity-0 position-absolute" required>
                    @if ($errors->has('id_card'))
                    <div class="invalid-feedback">{{ $errors->first('id_card') }}</div>
                    @else
                    <div class="invalid-feedback">
                      <span class="invalid-feedback-business-license">{{ __('common.error_required', ['name' => __('seller::register.business_license')]) }}</span>
                      <span class="invalid-feedback-id-card d-none">{{ __('common.error_required', ['name' => __('seller::register.id_card_photo')]) }}</span>
                    </div>
                    @endif
                  </div>

                  <label class="form-label id-number-title-tax">{{ __('seller::register.tax_id') }}</label>
                  <label class="form-label id-number-title-number d-none">{{ __('seller::register.id_number') }}</label>
                  <input type="text" name="id_number" class="form-control" value="{{ old('id_number', $id_number ?? '') }}" placeholder="{{ __('seller::register.tax_id') }}" required>
                  @if ($errors->has('tax_id'))
                  <div class="invalid-feedback">{{ $errors->first('tax_id') }}</div>
                  @else
                  <div class="invalid-feedback">
                    <span class="invalid-feedback-tax">{{ __('common.error_required', ['name' => __('seller::register.tax_id')]) }}</span>
                    <span class="invalid-feedback-id-number d-none">{{ __('common.error_required', ['name' => __('seller::register.id_number')]) }}</span>
                  </div>
                  @endif
                </div>
              </div>

              <div class="d-flex justify-content-end mb-5">
                <a href="{{ seller_route('login.index') }}" class="text-secondary">{{ __('seller::login.to_login') }}</a>
              </div>

              <div class="form-check">
                <input type="checkbox" id="agree" class="form-check-input" name="agree" value="1" required>
                <label class="form-check-label" for="agree">{!! $text_agree !!}</label>
                <div class="invalid-feedback">{{ __('seller::register.error_agree') }}</div>
              </div>

              <div class="d-grid mb-3 mt-2"><button type="submit" class="btn btn-lg btn-primary btn-submit-form">{{ __('shop/login.register') }}</button></div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    .header-mobile {
      display: none;
    }
  </style>
@endsection

@push('footer')
<script>
  const sellerType = @json(old('id_card', $type ?? 'company'));
  $('select[name="type"]').val(sellerType).trigger('change');

  // name="type" 改变时 触发
  $('select[name="type"]').on('change', function () {
    var type = $(this).val();
    var text = '';
    if (type == 'company') {
      $('.id-card-title-company').removeClass('d-none');
      $('.id-card-title-personal').addClass('d-none');
      $('.id-number-title-tax').removeClass('d-none');
      $('.id-number-title-number').addClass('d-none');
      // name="id_number" 的 placeholder
      $('input[name="id_number"]').attr('placeholder', $('.id-number-title-tax').text());

      $('.invalid-feedback-business-license').removeClass('d-none');
      $('.invalid-feedback-id-card').addClass('d-none');
      $('.invalid-feedback-tax').removeClass('d-none');
      $('.invalid-feedback-id-number').addClass('d-none');
    } else {
      $('.id-card-title-company').addClass('d-none');
      $('.id-card-title-personal').removeClass('d-none');
      $('.id-number-title-tax').addClass('d-none');
      $('.id-number-title-number').removeClass('d-none');
      // name="id_number" 的 placeholder
      $('input[name="id_number"]').attr('placeholder', $('.id-number-title-number').text());

      $('.invalid-feedback-business-license').addClass('d-none');
      $('.invalid-feedback-id-card').removeClass('d-none');
      $('.invalid-feedback-tax').addClass('d-none');
      $('.invalid-feedback-id-number').removeClass('d-none');
    }
  });

  $('.open-file').click(function() {
    $('#form-upload').remove();
    $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" accept="image/*" name="file" /></form>');
    $('#form-upload input').click().change(function() {
      var formData = new FormData();
      formData.append('file', $(this)[0].files[0]);
      formData.append('type', 'seller_register_card');
      $http.post('{{ shop_route('file.store') }}', formData).then(res => {
        $('input[name="id_card"]').val(res.data.value);
        $('.id-card-img').attr('src', res.data.url).removeClass('d-none');
        $('.bi-plus-lg').addClass('d-none');
      })
    });
  });
</script>
@endpush
